<template>
<!-- 	<view style="height: 30px; margin:3px 10px 10px; font-size: 22px;  letter-spacing: 2px">订单详情 ></view> -->
	 <view class="containers">
	    <view class="item" v-for="foods in food.cao">
	      <image class="item-image" :src="foods.comboImg"></image>
	      <view class="item-info">
	        <text class="item-title">{{foods.comboContain}}</text>
	      </view>
	    </view>

	
<!-- 	    <view class="discounts">
	      <view class="discount-item">
	        <text>至减红包</text>
	        <text style="color: red;">-￥{{food.money-food.money*0.9}}</text>
	      </view>
	    </view> -->
	
	   
	  </view>
  <view class="container">
    <view class="row">
      <text class="label">送单时间</text>
      <text class="value">第二天中午</text>
    </view>
    <view class="row">
      <text class="label">配送地址</text>
      <text class="value">{{food.userRemark}}</text>
    </view>
    <view class="row">
      <text class="label">昵称</text>
      <text class="value">{{food.userName}} </text>
    </view>
	<view class="row">
	  <text class="label">电话号</text>
	  <text class="value">{{food.userNumber}}</text>
	</view>
    <view class="row">
      <text class="label">配送服务</text>
      <text class="value">至减专送</text>
    </view>
    <view class="row">
      <text class="label">配送骑手</text>
      <text class="value">至减骑手</text>
    </view>
    <view class="row">
      <text class="label">订单号码</text>
      <view class="value-row">
        <text class="value">{{food.orderId}}</text>
      </view>
    </view>
    <view class="row">
      <text class="label">订单创建时间</text>
      <text class="value">{{food.createTime}}</text>
    </view>
    <view class="row">
      <text class="label">支付方式</text>
      <text class="value">在线支付</text>
    </view>
    <view class="row">
      <text class="label">餐具数量</text>
      <text class="value">商家按餐量提供</text>
    </view>
  </view>
</template>

<script setup>
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';

	const food = ref([''])

	onLoad((options) => {
		if (options.food) {
			try {
				food.value = JSON.parse(options.food)
				console.log(JSON.parse(options.food));
			} catch (e) {
				console.error('Failed to parse food data:', e);
			}
		} else {
			console.error('No food data received');
		}
	});
</script>

<style scoped>
	.containers {
		background-color: #fff;
		margin: 0 10px;
	  padding: 10px;
	}
	.item {
	  display: flex;
	  margin-bottom: 10px;
	}
	.item-image {
	  width: 80px;
	  height: 80px;
	  margin-right: 10px;
	}
	.item-info {
	  flex: 1;
	}
	.item-title {
	  font-size: 16px;
	  font-weight: bold;
	}
	.item-desc {
	  font-size: 14px;
	  color: #666;
	}
	.item-price {
	  font-size: 16px;
	  color: #e60000;
	  margin-top: 5px;
	}
	.fees, .discounts {
	  margin-top: 10px;
	}
	.fee-item, .discount-item {
	  display: flex;
	  justify-content: space-between;
	  margin-bottom: 5px;
	}
	.original-price {
	  text-decoration: line-through;
	  margin-right: 5px;
	}
	.total {
	  display: flex;
	  justify-content: space-between;
	  font-size: 18px;
	 color: red;
	  margin-top: 10px;
	}
.container {
 padding: 16px;
     margin: 0 10px;
     background-color: #fff;
     border-radius: 20px;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.label {
  font-size: 16px;
  color: #666;
  flex: 1;
}

.value {
  font-size: 16px;
  color: #333;
  flex: 2;
  text-align: right;
}

.value-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 2;
}

.single-line {
  flex: 3;
}

.copy {
  font-size: 14px;
  color: #1E90FF;
}
</style>